<template>
	<div class="box" v-loading="loading" element-loading-text="加载中" element-loading-background="rgba(0, 0, 0, 0.8)">
		<CommonModule name="年返修单完成量统计">
			<template v-slot:header>
				<el-date-picker v-model="year" value-format="yyyy" format="yyyy年" size="mini" type="year" placeholder="选择年" style="width: 10rem" :clearable="false"></el-date-picker>
			</template>
			<template v-slot:footer>
				<div class="data-board" id="histogram"></div>
			</template>
		</CommonModule>
	</div>
</template>

<script>
import CommonModule from "./CommonModule.vue"
import { repairOrderComplete } from "@/api/home.js"
import { mixinYear } from "./mixin.js"

export default {
	components: { CommonModule },
	mixins: [mixinYear],
	data() {
		return {
			loading: false,
			histogram: null,
			objResizeObserver: null
		}
	},
	beforeDestroy() {
		this.objResizeObserver.disconnect()
	},
	methods: {
		async getData() {
			try {
				this.loading = true
				let res = await repairOrderComplete({
					year: this.year
				})
				// console.log(res)
				this.$nextTick(() => {
					this.drawBarChart(res.data)
				})
				this.loading = false
			} catch (error) {
				this.loading = false
				console.error("获取年返修单完成量统计数据错误", error)
				this.$modal.msgError("获取年返修单完成量统计数据错误")
			}
		},
		drawBarChart(arr) {
			if (this.histogram) {
				this.histogram.dispose()
			}
			this.histogram = this.$echarts.init(document.getElementById("histogram"))
			let option = {
				tooltip: {
					trigger: "item",
					axisPointer: {
						type: "shadow"
					},
					backgroundColor: "rgba(2, 135, 147, 0.6)",
					textStyle: {
						color: "#fff"
					}
				},
				grid: {
					top: "16%",
					left: "3%",
					right: "3%",
					bottom: "3%",
					containLabel: true
				},
				xAxis: {
					type: "category",
					data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
					axisLine: {
						show: false
					},
					axisLabel: {
						margin: 10,
						color: "#fff",
						fontSize: 12,
						interval: 0
					},
					axisTick: {
						show: false
					}
				},
				yAxis: {
					type: "value",
					axisLabel: {
						formatter: "{value}",
						color: "#fff",
						fontSize: 12
					},
					minInterval: 1,
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.1)",
							type: "solid",
							dashOffset: 0
						}
					}
				},
				series: [
					{
						data: arr,
						type: "bar",
						barWidth: 14,
						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: "#0267FF" // 0% 处的颜色
									},
									{
										offset: 1,
										color: "#00F0FF" // 100% 处的颜色
									}
								],
								false
							)
						},
						label: {
							show: true,
							lineHeight: 10,
							formatter: "{c}",
							position: "top",
							color: "#B6F1FF",
							fontSize: 12
						}
					}
				]
			}

			this.histogram.setOption(option)
			this.objResizeObserver = new ResizeObserver(() => {
				if (this.histogram) {
					this.histogram.resize()
				}
			})
			this.objResizeObserver.observe(document.getElementById("histogram"))
		}
	}
}
</script>

<style lang="scss" scoped>
.box {
	height: 32%;
	width: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding-top: 10px;
	margin-bottom: 10px;
	flex-shrink: 0;
}

.data-board {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
</style>
